<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Personleft active="skill" />
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Memtitle name="添加技能" />
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="180px"
          style="margin-top: 20px;"
        >
          <div class="clear">
            <div class="formban">
              <el-form-item label="技能名称" prop="skillName">
                <el-input placeholder="请输入技能名称" v-model="form.skillName" maxlength="10" />
              </el-form-item>
              <el-form-item label="熟练程度" prop="level">
                <el-select v-model="form.level" placeholder="请选择熟练程度">
                  <el-option
                    :label="dengjiList[item]"
                    :value="dengjiList[item]"
                    v-for="(item, index) in Object.keys(dengjiList)"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <el-form-item style="margin-top: 40px">
            <el-button
              style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
              type="primary"
              @click="onSubmit"
              >保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import {
  updataSkill,
  addSkill,
  findSkill,
  dengji
} from '../../assets/js/domains'

export default {
  name: 'PersonSkillAdd',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      dengjiList: dengji,
      form: {
        skillName: '',
        level: ''
      },
      rules:{
        skillName:[
          { required: true, message: '请输入技能名称', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        level:[
          { required: true, message: '请选择熟练程度', trigger: 'change' },
        ]
      }
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.form.userUid = localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getpost()
    }
  },
  methods: {
    onSubmit(){
      this.$refs.form.validate(valid => {
        if(!valid){
          this.$message.error('请完善后再保存！')
          return
        }
        this.submitData()
      })
    },
    submitData() {
      const _this = this
      this.form.approval = '1'
      if (this.form.id) {
        updataSkill(this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/skill' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {}
            })
          }
        })
      } else {
        addSkill(this.form).then(function (res) {
          if (res.code === 200) {
            _this.$alert('添加成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/skill' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {}
            })
          }
        })
      }
    },
    getpost: function () {
      const _this = this
      findSkill({
        id: _this.form.id
      }).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {}
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../assets/css/member";
</style>
